<legend ng-click="milestoneController.toggleMilestone($event)">
    {{ milestoneController.milestone.label }}
    <div
        ng-if="! milestoneController.milestone.collapsed && milestoneController.canUserMoveCards()"
        class="btn-group dropdown do-animate"
    >
        <span class="dropdown-toggle btn btn-mini" id="dLabel" role="button" data-toggle="dropdown" data-target="#">
            <i class="icon-plus"></i> <span translate>Add a new item</span>
            <b class="caret"></b>
        </span>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li ng-repeat="accepted_type in milestoneController.milestone.content_accepted_types.content">
                <a href="#" class="create-item-link" ng-click="planning.showAddItemToSubMilestoneModal(accepted_type, milestoneController.milestone)">{{ accepted_type.label }}</a>
            </li>
        </ul>
    </div>
    <span class="label status {{ milestoneController.milestone.semantic_status }}">{{ milestoneController.milestone.status_value }}</span>
    <span class="date" ng-if="milestoneController.milestone.start_date || milestoneController.milestone.end_date">
        {{ milestoneController.milestone.start_date | amDateFormat:'ll' }} <i class="icon-long-arrow-right"></i>
        {{ milestoneController.milestone.end_date | amDateFormat:'ll' }}
    </span>
    <div style="clear: both"></div>
</legend>

<div class="content" ng-show="! milestoneController.milestone.collapsed" ng-class="{ loading_content: milestoneController.milestone.loadingContent }">
    <div class="info">
        <span class="capacity" translate>Capacity:</span>
        <span class="capacity-value" ng-if="milestoneController.milestone.capacity">{{ milestoneController.milestone.capacity }}</span>
        <span class="capacity-value" ng-if="! milestoneController.milestone.capacity" translate>N/A</span>

        <span class="initial-effort" translate>Initial effort:</span>
        <span class="initial-effort-value" ng-if="milestoneController.milestone.initialEffort" ng-class="{ higher: milestoneController.milestone.initialEffort > milestoneController.milestone.capacity }">{{ milestoneController.milestone.initialEffort }}</span><span class="initial-effort-value non-applicable" ng-if="! milestoneController.milestone.initialEffort" translate>N/A</span>

        <ul>
            <li>
                <a href="/plugins/tracker/?aid={{ milestoneController.milestone.id }}" ng-click="planning.showEditSubmilestoneModal($event, milestoneController.milestone)" title="{{ 'Edit' | translate }}">
                    <i class="icon-edit"></i> <span translate>Edit</span>
                </a>
            </li>
            <li ng-if="! milestoneController.milestone.sub_milestone_type">
                <a href="{{ planning.generateMilestoneLinkUrl(milestoneController.milestone, 'blcontent') }}" title="{{ 'Content' | translate }}">
                    <i class="icon-list-ul"></i> <span translate>Content</span>
                </a>
            </li>
            <li ng-if="milestoneController.milestone.resources.milestones.accept.trackers.length > 0">
                <a href="{{ planning.generateMilestoneLinkUrl(milestoneController.milestone, 'planning-v2') }}" title="{{ 'Planning' | translate }}">
                    <i class="icon-signin"></i> <span translate>Planning</span>
                </a>
            </li>
            <li ng-if="milestoneController.milestone.resources.burndown">
                <a href="{{ planning.generateMilestoneLinkUrl(milestoneController.milestone, 'burndown') }}" title="{{ 'Burndown' | translate }}">
                    <i class="icon-bar-chart"></i> <span translate>Burndown</span>
                </a>
            </li>
            <li ng-if="milestoneController.milestone.resources.cardwall">
                <a href="{{ planning.generateMilestoneLinkUrl(milestoneController.milestone, 'cardwall') }}" title="{{ 'Cardwall' | translate }}">
                    <i class="icon-table"></i> <span translate>Cardwall</span>
                </a>
            </li>
        </ul>

        <div style="clear: both"></div>
    </div>

    <ul class="backlog-items submilestone"
        ng-class="{ 'empty-milestone': milestoneController.isMilestoneLoadedAndEmpty() }"
        data-accept="{{ milestoneController.milestone.content_accepted_types.toString() }}"
        data-submilestone-id="{{ milestoneController.milestone.id }}"
        data-nodrop="{{ ! milestoneController.canUserMoveCards() }}"
    >
        <li ng-repeat="backlog_item in milestoneController.milestone.content"
            class="backlog-item parent in-milestone"
            data-accept="{{ backlog_item.accepted_types.toString() }}"
            data-type="{{ backlog_item.trackerId }}"
            ng-show="planning.canShowBacklogItem(backlog_item)"
            ng-class="milestoneController.getMilestoneBacklogItemClasses(backlog_item)"
            collapsed="true"
            data-nodrag="{{ ! milestoneController.canUserMoveCards() }}"
            data-item-id="{{ backlog_item.id }}"
            backlog-item-index="$index"
            backlog-item-select="backlog_item"
        >
            <backlog-item
                ng-init="canUserMoveCards=milestoneController.canUserMoveCards;current_milestone=milestoneController.milestone"
            ></backlog-item>
        </li>
    </ul>

    <div class="loading" ng-if="milestoneController.milestone.loadingContent"></div>
</div>
